<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增食品</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css">

    <!--    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>-->
    <link rel="stylesheet" href="/css/global.css">
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <link rel="stylesheet" href="/css/global.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script>
    <!--    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
</head>
<style>
    .van-cell__value {
        overflow: initial;
    }
</style>
<body>
<!--<div class="bg"></div>-->
<div id="app">
    <van-row>
        <van-col span="24">
            <van-nav-bar
                    title="新增运动"
                    left-text="返回"
                    left-arrow
                    @click-left="onClickLeft"
            >
                <template #right>
                    <van-button style="margin: 8px 0;border-radius: 4px" size="small" square
                                color="linear-gradient(to right, #4bb0ff, #6149f6)" @click="submit" block>保存
                    </van-button>
                </template>
            </van-nav-bar>
        </van-col>
        <van-col span="24">
            <div class="box"></div>
        </van-col>
        <van-col span="24">
            <!--            <van-form @submit="onSubmit">-->

            <div>
                <van-field
                        v-model="MM.mmName"
                        name="运动名字"
                        label="运动名字"
                        placeholder="请输入运动名字"
                        :rules="[{ required: true, message: '请填运动名称' }]"
                ></van-field>
                <van-field
                        v-model="MM.difficulty"
                        name="难度"
                        label="难度"
                        placeholder="请输入难度"
                        :rules="[{ required: true, message: '请填写难度' }]"
                ></van-field>
                <van-field
                        v-model="MM.mmDescription"
                        rows="2"
                        autosize
                        label="描述"
                        type="textarea"

                        placeholder="请输入描述"
                        show-word-limit
                ></van-field>
                <van-field
                        v-model="MM.points"
                        rows="2"
                        autosize
                        label="要点"
                        type="textarea"

                        placeholder="请输入要点"
                        show-word-limit
                ></van-field>
                <!--                    <van-field name="uploader" label="文件上传">-->
                <!--                        <template #input>-->
                <!--                            <van-uploader v-model="uploader" />-->
                <!--                        </template>-->
                <!--                    </van-field>-->


                <!--                <van-popup v-model="show" position="bottom" :style="{ height: '30%' }" >-->
                <!--                    <p class="p-3 border-bottom">新增表单</p>-->
                <!--                    <van-field-->
                <!--                            v-model="username"-->
                <!--                            name="单位名称"-->
                <!--                            label="单位名称"-->
                <!--                            placeholder="请输入单位名称"-->
                <!--                    ></van-field>-->
                <!--                    <van-field-->
                <!--                            v-model="username"-->
                <!--                            name="消耗的热量"-->
                <!--                            label="消耗的热量"-->
                <!--                            placeholder="请输入消耗的热量"-->
                <!--                    ></van-field>-->
                <!--                    <div class="pl-3 pr-3 mt-2">-->
                <!--                        <van-button style="border-radius: 4px" square-->
                <!--                                    color="linear-gradient(to right, #4bb0ff, #6149f6)" block>保存-->
                <!--                        </van-button>-->
                <!--                    </div>-->

                <!--                </van-popup>-->
                <van-uploader v-model="fileList" multiple :max-count="1" max-size='500*500' :after-read="afterRead">
                    <van-button icon="plus" type="primary">点我上传图片</van-button>
                    <template #preview-cover="{ file }">
                        <div class="preview-cover van-ellipsis">{{ file.name }}</div>
                    </template>
                </van-uploader>
                <style>
                    .preview-cover {
                        position: absolute;
                        box-sizing: border-box;
                        bottom: 0;
                        width: 100%;
                        padding: 4px;
                        color: #fff;
                        font-size: 12px;
                        text-align: center;
                        background: rgba(0, 0, 0, 0.3);
                    }
                </style>
                <div class="bg-f9 p-3" v-for="(abc,index) in MM.units">
                    <button class="bg-f9 color-main border-0" @click="deleteAUnit(index)">删除</button>
                    <van-field
                            name="单位名称"
                            label="单位名称"
                            placeholder="单位名称"
                            v-model="abc.unitName"
                            :rules="[{ required: true, message: '请填写单位名称' }]"
                    >{{abc.unitName}}
                    </van-field>
                    <van-field
                            name="热量"
                            label="热量"
                            v-model="abc.consumCalories"
                            placeholder="例如（1000千卡）"
                            :rules="[{ required: true, message: '请填写热量' }]"
                    >{{abc.consumCalories}}
                    </van-field>

                </div>
                <div class="pt-3">
                    <van-button color="#349aff" plain style="border-radius: 4px" @click="addAUnit" square block>新增单位
                    </van-button>
                </div>
            </div>
        </van-col>
        <!--        </van-form>-->
    </van-row>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                MM: {
                    units:
                        [
                            {
                                unitName: '',
                                consumCalories: '',
                            },

                        ],
                    mmName: '',
                    mmImgurl: 0,
                    mmCategoryId: 0,
                    status: 2,
                    mmPackagetype: 2,
                    mmDescription: '',
                    difficulty: '',
                    points: '',
                },
                fileList: [
                    // {
                    //     url: 'https://img.yzcdn.cn/vant/leaf.jpg',
                    //     isImage: true,
                    //     status:'uploading',
                    //     message:'正在上传'
                    // },
                    // Uploader 根据文件后缀来判断是否为图片文件
                    // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
                    // { url: 'https://cloud-image',
                    //     isImage: true,
                    //     status:'uploading',
                    //     message:'正在上传'},
                ],
                file: '',
                username: '',
                password: '',
                value: '',
                columns: ['个', '份', '瓶'],
                showPicker: false,
                uploader: [{url: 'https://img.yzcdn.cn/vant/leaf.jpg'}],
                checkbox: false,
                checkboxGroup: [],
                message: '',
                value1: '',
                show: false,
            };
        },
        methods: {
            submit() {
                //将字符串封装
                var uNames = vm.$data.MM.units[0].unitName;
                var uCosums = vm.$data.MM.units[0].consumCalories;
                for (var i = 1; i < vm.$data.MM.units.length; i++) {
                    uNames += "@" + vm.$data.MM.units[i].unitName;
                    uCosums += "@" + vm.$data.MM.units[i].consumCalories;
                    console.log("the unames is" + uNames);
                    console.log("the ucosums is" + uCosums);
                }
                var postdata = new FormData();
                postdata.append("mmName", vm.$data.MM.mmName);
                postdata.append("mmImgurl", vm.$data.MM.mmImgurl);
                postdata.append("mmCategoryId", vm.$data.MM.mmCategoryId);
                postdata.append("status", vm.$data.MM.status);
                postdata.append("mmPackagetype", vm.$data.MM.mmPackagetype);
                postdata.append("mmDescription", vm.$data.MM.mmDescription);
                postdata.append("difficulty", vm.$data.MM.difficulty);
                postdata.append("points", vm.$data.MM.points);
                postdata.append("unitNameString", uNames);
                postdata.append("unitConsumString", uCosums);
                postdata.append("file", this.file.file);
                let headers = {headers: {"Content-Type": "multipart/form-data"}};
                // let postdata={
                //      mmName:vm.$data.MM.mmName,
                // mmImgurl:vm.$data.MM.mmImgurl,
                // mmDescription:vm.$data.MM.mmDescription,
                // difficulty:vm.$data.MM.difficulty,
                // points:vm.$data.MM.points,
                // units:vm.$data.MM.units,
                // };
                console.log(JSON.stringify(postdata));
                axios.post(`/movuser/addADIYmodel`, (postdata), headers)
                    .then(res = > {
                    console.log('res=>', res);
                alert(res.data.returnMsg.toString());
            })
                ;
            },
            afterRead(file) {
                // file.status = 'uploading';
                // file.message = '上传中...';
                vm.$data.file = file;
                // setTimeout(() => {
                //     file.status = 'failed';
                //     file.message = '上传失败';
                // }, 6000);
                console.log(file);
            },
            addAUnit() {
                vm.$data.MM.units.push({
                    unitName: '',
                    unitConsumeCalories: '',
                },);
            },
            deleteAUnit(index) {
                vm.$data.MM.units.splice(index, 1);
            },
            onClickLeft() {
                window.location.href = "tolookformov";
                Toast('返回');
            },
            onSubmit(values) {
                console.log('submit', values);
            },
            onConfirm(value) {
                this.value = value;
                this.showPicker = false;
            },
            showPopup() {
                this.show = true;
            },
        },
    });
</script>
</html>